<div class="detail-info tab-content">
  <div class="l-group">
    <!-- <form nz-form [nzLayout]="validateForm.controls?.formLayout?.value" 
      [formGroup]="validateForm" (ngSubmit)="submitForm()"> -->

      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
          <label nz-form-item-required>食谱名称</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="6" *ngIf="!typeSee">
          <nz-input [(ngModel)]="recipeParams.name" [nzSize]="'large'">
          </nz-input>
          <!-- <div nz-form-explain *ngIf="validateForm.controls.recipesName.dirty&&validateForm.controls.recipesName.hasError('required')">请输入食谱名称!</div> -->
        </div>
        <div nz-form-control nz-col [nzSpan]="6" *ngIf="typeSee">
          <p>{{ recipeParams.name }}</p>
        </div>
      </div>

      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
          <label nz-form-item-required>渠道</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="16" class="info-channel-panel">
          <span class="channel" *ngFor="let channel of recipeParams.channelIdsArray;let i = index;" style="margin-right:4px;">
            <!-- <span *ngIf="channel.parentsName">
              {{ channel.parentsName + channel.name }}
            </span>
            *ngIf="!channel.parentsName" -->
            <span>
              {{ channel.parent ? channel.parent.parent ? channel.parent.parent.name + '-' + channel.parent.name + '-' + channel.name :
                channel.parent.name + '-' + channel.name : channel.name }}
            </span>
              <span class="channelprice">
                <span class="fl">¥</span>
                <div class="seePrice" *ngIf="typeSee">{{ channel.price }}</div>
                <!-- <input type="text" formControlName="channelPrice" placeholder="市场价" [(ngModel)]="channel.price" *ngIf="!typeSee" /> -->
                <nz-input *ngIf="!typeSee" [nzType]="'text'" [nzPlaceHolder]="'市场价'"
                  [(ngModel)]="channel.price" [nzSize]="'large'">
                </nz-input>
              </span>
              <b nz-tooltip="删除本条" *ngIf="!typeSee" (click)="channelDelete(channel,'channel')">x</b>
          </span>
          <i nz-tooltip="添加渠道" *ngIf="!typeSee" class="anticon anticon-plus-circle" (click)="showModal('channel')"></i>
        </div>
      </div>

      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
          <label nz-form-item-required>标签</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="16" class="info-channel-panel info-label-panel">
          <span class="channel labelsinfo" *ngFor="let label of recipeParams.tagAttributeIdsArray;let i = index;" style="margin-right:4px;">
            {{ label.parent ? label.parent.name + '-' + label.name : label.name }}<b nz-tooltip="删除本条" *ngIf="!typeSee" (click)="channelDelete(label,'label')">x</b></span>
          <i nz-tooltip="添加标签" *ngIf="!typeSee" class="anticon anticon-plus-circle" (click)="showModal('label')"></i>
        </div>
      </div>

      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
          <label nz-form-item-required>出品规格</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="6">
          <div *ngIf="!typeSee">
            <nz-input [nzType]="'text'" [(ngModel)]="recipeParams.specification" [nzSize]="'large'" style="max-width: 90%;">
            </nz-input>
            <!-- <div nz-form-explain *ngIf="validateForm.controls.recipesSpecifications.dirty&&validateForm.controls.recipesSpecifications.hasError('required')">请输入成品规格!</div> -->
          </div>
          <div *ngIf="typeSee">
            {{ recipeParams.specification }}
          </div>
        </div>
      </div>

      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
          <label nz-form-item-required>方案负责人</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="6" *ngIf="!typeSee">
          <nz-select nzAllowClear style="min-width: 110px;" 
            [(ngModel)]="recipeParams.resPerson"
            [nzPlaceHolder]="'请选择'" [nzSize]="'large'">
            <nz-option
              *ngFor="let option of recipeParams.resPersonArray"
              [nzLabel]="option.employeeName"
              [nzValue]="option.employeeId">
            </nz-option>
          </nz-select>
          <!-- <div nz-form-explain *ngIf="validateForm.controls.concatSelect.dirty&&validateForm.controls.concatSelect.hasError('required')">请选择方案负责人!</div> -->
        </div>
        <div nz-form-control nz-col [nzSpan]="6" *ngIf="typeSee">
          <p>{{ recipeParams.resPerson }}</p>
        </div>
      </div>

      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
          <label nz-form-item-required>食谱配方</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="20">
          <nz-table #nzTableMaterial
            [nzAjaxData]="recipeParams.recipeMaterialList"
            [nzIsPagination]="false" nzBordered>
            <thead nz-thead>
              <tr>
                <th nz-th [nzWidth]="'20px'" *ngIf="!typeSee"><span>操作</span></th>
                <th nz-th [nzWidth]="'100px'"><span>原料名称</span></th>
                <th nz-th [nzWidth]="'130px'"><span>关联商品</span></th>
                <th nz-th [nzWidth]="'70px'"><span>用量</span></th>
                <th nz-th [nzWidth]="'30px'"><span>主要原料</span></th>
              </tr>
            </thead>
            <tbody nz-tbody>
              <tr nz-tbody-tr *ngFor="let data of nzTableMaterial.data">
                <td nz-td class="m-set-panel" *ngIf="!typeSee">
                  <i nz-tooltip="新增" (click)="addRecipesOData()" class="anticon anticon-plus-square"></i>
                  <i nz-tooltip="删除" (click)="deleteRecipesOData(data)" class="anticon anticon-minus-square"></i>
                </td>
                <td nz-td>
                  <div *ngIf="!typeSee">
                    <nz-select
                      *ngIf="!data.isNameShow"
                      style="width: 70%;"
                      nzAllowClear
                      [nzPlaceHolder]="'请输入原料关键字'"
                      [nzFilter]="false"
                      [(ngModel)]="data.Material.id"
                      (ngModelChange)="changeMaterialItem(data)"
                      (nzSearchChange)="searchMaterial($event, data)"
                      [nzNotFoundContent]="'无法找到'"
                      nzShowSearch>
                      <nz-option
                        *ngFor="let option of data.searchlist"
                        [nzLabel]="option.name"
                        [nzValue]="option.id">
                      </nz-option>
                    </nz-select>
                    <p *ngIf="data.isNameShow">{{ data.name }}</p>
                    <!-- <nz-input [(ngModel)]="data.name" (click)="data.isNameShow = true;" [nzPlaceHolder]="'请输入原料关键字'" *ngIf="!data.isNameShow && modelType !== 'create'" style="width: 200px;"></nz-input> -->
        
                    <i class="anticon anticon-ellipsis" nz-tooltip="展开列表" *ngIf="!data.isNameShow"
                      (click)="showMaterialModal(data)"
                      style="font-size: 20px;vertical-align: middle;cursor: pointer;"></i>
                  </div>
                  <div *ngIf="typeSee">
                    <p>{{ data.name }}</p>
                  </div>
                </td>
                <td nz-td>
                  <div class="material-product" *ngFor="let product of data.goods;let i = index;" style="margin-bottom: 10px;">
                    {{product.name}}
                    <!-- star 推荐 -->
                    <span class="m-star" *ngIf="product.recomflag == 1">
                      <i class="anticon anticon-heart"></i>
                      推荐
                    </span>
                  </div>
                </td>
                <td nz-td>
                  <div *ngIf="!typeSee">
                      <nz-input [(ngModel)]="data.dosage" [nzPlaceHolder]="'请输入用量'" *ngIf="data.Material.id"
                      (ngModelChange)="_console($event)" style="max-width: 50px;"></nz-input> {{ data.unit | enum: unitDataType }}
                  </div>
                  <div *ngIf="typeSee">
                    <p>{{ data.dosage }} {{ data.unit | enum: unitDataType }}</p>
                  </div>
                </td>
                <td nz-td nzCheckbox>
                  <div *ngIf="!typeSee">
                    <label nz-checkbox *ngIf="data.Material.id" [(ngModel)]="data.main">
                    </label>
                  </div>
                  <div *ngIf="typeSee">
                    <p>{{ data.main ? '是' : '否' }}</p>
                  </div>
                </td>
              </tr>
            </tbody>
          </nz-table>
        </div>
      </div>

      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="3">
          <label nz-form-item-required>SOP</label>
        </div>
        <div nz-form-control nz-col class="info-sop" [nzSpan]="20">
          <textarea row="10" nz-input placeholder="请输入操作步骤，最多输入500字"
            class="infoSopTextarea"
            (ngModelChange)="sopInputChange(recipeParams.sop)"
            [(ngModel)]="recipeParams.sop" style="min-height: 100px;">
          </textarea>
          <div>
            还可输入{{ 500 - (recipeParams.sop.length || 0) }}个字符
            <span *ngIf="recipeParams.sop.length > 500" class="info-sopErr">SOP字数不能超出500个字符</span>
          </div>
        </div>
      </div>

    <!-- </form> -->
  </div>

  <!-- 弹窗 添加渠道,标签 -->
  <nz-modal [nzVisible]="isVisible"
            [nzContent]="modalContentChannel" 
            (nzOnCancel)="handleCancel($event)" 
            (nzOnOk)="handleChannelOk($event)">
    <ng-template #modalContentChannel>
      <div class="l-group">
        <div class="treeList">
          <div class="treeHeader">
            {{ modalTitle }}
          </div>
          <div class="treeList_li" *ngFor="let items of data;let i = index;">
            <div class="treeli items_li level1">
              <div style="display: inline-block;width:20px;">
                <span *ngIf="items.children">
                  <i class="anticon anticon-plus-square" *ngIf="!items.open" (click)="items.open = !items.open;"></i>
                  <i class="anticon anticon-minus-square" *ngIf="items.open" (click)="items.open = !items.open;"></i>
                </span>
              </div>
              <div class="items_li_label">
                <label nz-checkbox [(ngModel)]="items.checked" (ngModelChange)="_checkedInput(items)">
                  <span>{{ items.name }}</span>
                </label>
                <i class="anticon anticon-minus-square twoSelect" *ngIf="items.twoSelect && !items.checked"></i>
              </div>
            </div>
            
            <div class="treeList_li_panel" *ngIf="items.open">
              <div class="treeList_li_panel_li" *ngFor="let item of items.children;let it = index;">
                <div class="treeli items_li level2">
                  <div style="display: inline-block;width:20px;">
                    <span *ngIf="item.children">
                      <i class="anticon anticon-plus-square" *ngIf="!item.open" (click)="item.open = !item.open;"></i>
                      <i class="anticon anticon-minus-square" *ngIf="item.open" (click)="item.open = !item.open;"></i>
                    </span>
                  </div>
                  <div class="items_li_label">
                    <label nz-checkbox [(ngModel)]="item.checked" (ngModelChange)="_checkedInput(item)">
                      <span>{{ item.name }}</span>
                    </label>
                    <i class="anticon anticon-minus-square twoSelect" *ngIf="item.twoSelect && !item.checked"></i>
                  </div>
                </div>

                <div class="treeList_li_panel" *ngIf="item.open">
                  <div class="treeList_li_panel_li" *ngFor="let ite of item.children;let itl = index;">
                    <div class="treeli items_li level3">
                      <div style="display: inline-block;width:20px;">
                        <span *ngIf="ite.children">
                          <i class="anticon anticon-plus-square" *ngIf="!ite.open" (click)="ite.open = !ite.open;"></i>
                          <i class="anticon anticon-minus-square" *ngIf="ite.open" (click)="ite.open = !ite.open;"></i>
                        </span>
                      </div>
                      <label nz-checkbox [(ngModel)]="ite.checked" (ngModelChange)="_checkedInput(ite)">
                        <span>{{ ite.name }}</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </ng-template>
  </nz-modal>

  <!-- 弹窗 添加原料 -->
  <nz-modal [nzVisible]="isMaterialVisible" [nzTitle]="'添加原料'" 
    [nzContent]="materialContent" 
    (nzOnCancel)="handleMaterialCancel($event)" 
    (nzOnOk)="handleMaterialOk($event)">
    <ng-template #materialContent>
        <div class="l-group">
          <nz-input [nzType]="'search'" [nzPlaceHolder]="'输入原料名称'" 
            [(ngModel)]="_value" style="width: 200px;" 
            (nzOnSearch)="onSearch($event)"></nz-input>
        </div>

        <div class="l-group" *ngIf="materialAlertParams.data.length > 0">
          
          <nz-table #nzTable [nzAjaxData]="materialAlertParams.data" 
            [nzLoading]="_loading"
            [nzTotal]="materialAlertParams.totalPages"
            [(nzPageIndex)]="materialAlertParams.pageNumber"
            [(nzPageSize)]="materialAlertParams.pageSize"
            (nzPageIndexChange)="pageChange(true)"
            (nzPageSizeChange)="pageChange(true)"
            nzBordered>
            <thead nz-thead>
              <tr>
                <th nz-th nzCheckbox>
                  <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
                  </label>
                </th>
                <th nz-th><span>原料名称</span></th>
                <th nz-th><span>关联商品</span></th>
                <th nz-th><span>用量</span></th>
              </tr>
            </thead>
            <tbody nz-tbody>
              <tr nz-tbody-tr *ngFor="let data of nzTable.data">
                <td nz-td nzCheckbox [ngStyle]="{ backgroundColor: data.disabled?'#f7f7f7':''}">
                  <label nz-checkbox [(ngModel)]="data.checked" [nzDisabled]="data.disabled" (ngModelChange)="_refreshStatus($event)">
                  </label>
                </td>
                <td nz-td [ngStyle]="{ backgroundColor: data.disabled?'#f7f7f7':''}">
                  <!-- <nz-input [nzType]="'text'" [nzPlaceHolder]="'原料名称'" 
                    [(ngModel)]="data.name" style="width: 50px;"></nz-input> -->
                  {{data.name}}
                </td>
                <td nz-td [ngStyle]="{ backgroundColor: data.disabled?'#f7f7f7':''}">
                  <div class="material-product" *ngFor="let product of data.goods;let i = index;" style="margin-bottom: 10px;">
                    {{product.name}}
                    <!-- star 推荐 -->
                    <span class="m-star" *ngIf="product.recomflag == 1">
                      <i class="anticon anticon-heart"></i>
                      推荐
                    </span>
                  </div>
                </td>
                <td nz-td [ngStyle]="{ backgroundColor: data.disabled?'#f7f7f7':''}">
                  <nz-input [nzType]="'text'" [nzPlaceHolder]="'输入用量'" 
                    [(ngModel)]="data.dosage" [nzDisabled]="data.disabled" style="width: 70px;"></nz-input> {{ data.unit | enum: unitDataType }}
                </td>
              </tr>
            </tbody>
          </nz-table>

        </div>
    </ng-template>
  </nz-modal>

</div>

<div class="footer_panel" *ngIf="!typeSee">
  <div class="m-form-sub" *authority="['recipes/list/2']">
    <a (click)="saveInfo()">确认</a><!--
    --><a (click)="goback()">取消</a>
  </div>
</div>
<div class="footer_panel" *ngIf="typeSee">
  <div class="m-form-sub" *authority="['recipes/list/2']">
    <a (click)="goback()">返回</a>
  </div>
</div> 
